<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {

  document.getElementById("latitude").value = latLng.lat();
  document.getElementById("longitude").value = latLng.lng();
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');


}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  <!--[if $form.latitude && $form.longitude]-->
   var latLng = new google.maps.LatLng(<!--[$form.latitude]-->, <!--[$form.longitude]-->);
  <!--[else]-->
   var latLng = new google.maps.LatLng(13.759127,100.565185);
  <!--[/if]-->

  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
      scrollwheel: false,
    zoom: 13,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: '<!--[$form.name]-->',
    map: map,
    draggable: true
  });
  
  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
  
  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });
  
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });
  
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<TABLE width="100%">

<a href="index.php?module=VoteDataCenter&type=suratreport&func=mappoll">Home</a> 
| <a href="index.php?module=VoteDataCenter&type=suratreport&func=mappoll">Edit Map</a> 
| <a href="index.php?module=VoteDataCenter&type=suratreport&func=pollreport">Report </a><br>
<TR>
  <TD valign="top" width="80%">
      <fieldset>
      <legend>Map information</legend>

      <body>
        <style>
        #mapCanvas {
          width: 100%;
          height: 600px;
          float: left;
        }
        #infoPanel {
          float: left;
          margin-left: 10px;
        }
        #infoPanel div {
          margin-bottom: 5px;
        }
        </style>
        <div id="mapCanvas"></div>
      </fieldset>
  </TD>
  <TD valign="top" width="20%">
      <fieldset>
        <legend>Data Information</legend>
          <form id='form' class='form' action="<!--[pnmodurl modname='VoteDataCenter' type='suratreport' func='submit']-->" method="post">
              <input type="hidden" name="form[id]" value="<!--[$form.id]-->" />
              <TABLE width='100%' border="0">
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>Houe no&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <!--[$form.house_no]-->
                      </TD>
                  </TR>
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>Khet&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <!--[$form.khet]-->
                      </TD>
                  </TR>
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>Unit&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <!--[$form.unit]-->
                      </TD>
                  </TR
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>latitude&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <input id="latitude" type="text" name="form[latitude]" value="<!--[$form.latitude]-->" title="latitude" class="required" size="30"  /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <span id='error-latitude'></span>
                      </TD>
                  </TR>
                  <TR>
                      <TD class='td-label' align="left" width="20%"><B>longitude&nbsp;:&nbsp;</B></TD>
                  </TR>
                  <TR>
                      <TD align="left">
                        <input id="longitude" type="text" name="form[longitude]" value="<!--[$form.longitude]-->" title="longitude" class="required" size="30" /><FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <span id='error-longitude'></span>
                      </TD>
                  </TR>
                  <TR>
                      <TD align="left" width="100%">
                        <INPUT TYPE="submit" value="submit">
                        <input type="button" name="Cancel" value="Cancel" onclick="window.location = '<!--[pnmodurl modname='VoteDataCenter' type='admin' func='list' ctrl='HouseNo']-->' " />
                      </TD>
                  </TR>
              </TABLE>
          </form><BR>
        <hr>
        <div id="infoPanel">
          <b>Marker status:</b>
          <div id="markerStatus"><i>Click and drag the marker.</i></div>
          <b>Current position:</b>
          <div id="info"></div>
          <b>Closest matching address:</b>
          <div id="address"></div>
        </div>
      </body>
      </html>
      </fieldset><BR>
  </TD>
</TR>
</TABLE>
<!--[include file='admin_std_footer.htm']-->